.plugin__installed-on {
	margin-bottom: 16px;
}

.plugins__plugin-list-state {
	white-space: nowrap;
}

.plugins__main-header {
	background: var( --color-surface );
	flex-direction: column;
	display: flex;
	margin-bottom: 9px;

	@include breakpoint( '>480px' ) {
		flex-direction: row;
		margin-bottom: 17px;
	}
}

.plugins__main-header .section-nav {
	border: 1px solid rgba( var( --color-neutral-10-rgb ), 0.5 );
	box-shadow: none;
	flex: auto;
	margin: 0;

	@include breakpoint( '<660px' ) {
		border-width: 1px 0;
	}
}

.plugins__installed-header {
	margin-bottom: 1px;
}

.plugins__main-buttons {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 9px;
	width: 100%;

	@include breakpoint( '>480px' ) {
		margin-bottom: 17px;
	}


	.plugins__button {
		&:not( :last-child ) {
			margin-right: 10px;
		}

		&:last-child {
			@include breakpoint( '<660px' ) {
				margin-right: 15px;
			}
		}

		.gridicon {
			margin-right: 0;
			@include breakpoint( '>480px' ) {
				margin-right: 4px;
			}
		}

		@include breakpoint( '>480px' ) {
			flex: none;
		}

		.plugins__button-text {
			display: none;
			@include breakpoint( '>480px' ) {
				display: inline-block;
			}
		}
	}
}

.plugins__header-navigation {
	box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ), 0 1px 2px var( --color-neutral-0 );
	width: 100%;
}

.plugins__more-header {
	font-size: 14px;
	line-height: 2;
	margin: 40px 0 20px;
	padding: 0 15px;

	@include breakpoint( '>660px' ) {
		padding: 0;
	}
}
